<script>
export default {
  name: "NewRegister"

}
</script>
<script setup>

import {inject, onMounted, onUnmounted, provide, ref} from "vue";
import {ElMessage,ElMessageBox} from "element-plus";
import lendingRegisterApi from "@/views/lending/Api/lendingRegisterApi";
//browInfo:保存输入的借阅人信息
const browInfo = ref({
  'name':'',
  'startDate':'',
  'endDate':'',
  'enroll':''
})
const browInFoMap = ref()
const browInFoPost = ref()

//传输新建组件数据控制
const newBrowControl = inject('newBrowControl')
// formatDate:日期格式化函数
const forMatDate = (date)=> {
  // 检查 date 是否为有效日期
  if (!date || !date.getFullYear) {
    return '';
  }
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}


//saveInfo:保存信息
const saveInfo = ()=>{
  browInfo.value.startDate = forMatDate(browInfo.value.startDate)
  browInfo.value.endDate= forMatDate(browInfo.value.endDate)

  browInFoMap.value.forEach((keyItem)=>{
    for (const key in keyItem){
      if (browInfo.value.hasOwnProperty(keyItem[key]) === browInfo.value.hasOwnProperty(keyItem[key])){
        browInFoPost.value[key] = browInfo.value[keyItem[key]]
        console.log(browInFoPost.value)
      }
    }

  })

  browInfoAxiosPost()
  const title = "温馨提示";
  const content = "您是否确定确认保存？"
  const thenMsg = '操作成功'
  const thenType = 'success'
  const catchType = 'info'
  const catchMsg = '已取消'
  const confirmMsg = '确认'
  const cancelMsg = '取消'

  getCloseSavaAlter(title,content,thenMsg,thenType,catchType,catchMsg,confirmMsg,cancelMsg)
}
const browInfoAxiosPost = ()=>{
  console.log(browInFoPost.value)
  lendingRegisterApi.addRegister(browInFoPost.value).then(
      (response)=>{
        console.log(response.data.data)
   /*     if(Response.data.code === 2000){
          //提示用户保存成功
          ElMessage.success('保存成功')
        }else{
          ElMessage.error(Response.data.msg)
        }*/
      },
      (err)=>{
        console.log(err.message)}
  )
}
//initialize：初始化数据
const initialize = () => {
  newBrowControl.value.forEach((keyItem) => {
    Object.keys(keyItem).forEach((item) => {
      switch (item){
        case 'browInFoMap':
          browInFoMap.value = keyItem[item]
          break
        case 'browInFoPost':
          browInFoPost.value = keyItem[item]
          break
        default:
          console.warn(`Unknown key: ${keyItem}`);
          break;
      }
    });
  });


};
//closeSava:取消新增
const closeSava = ()=>{
  const title = "温馨提示";
  const content = "您是否确定取消保存？确认后将丢失填入数据！"
  const thenMsg = '操作成功'
  const thenType = 'success'
  const catchType = 'info'
  const catchMsg = '已取消'
  const confirmMsg = '确认'
  const cancelMsg = '取消'

  getCloseSavaAlter(title,content,thenMsg,thenType,catchType,catchMsg,confirmMsg,cancelMsg)
}
//getCloseSavaAlter:弹框提示
function getCloseSavaAlter(title,content,thenMsg,thenType,catchType,catchMsg,confirmMsg,cancelMsg){

  ElMessageBox.confirm(
      content,
      title,
      {
        distinguishCancelAndClose: true,
        confirmButtonText: confirmMsg,
        cancelButtonText: cancelMsg,
        type: 'warning',
      }
  )
      .then(() => {
        ElMessage({
          type: thenType,
          message: thenMsg,
        })
        setTimeout(()=>{
          window.location.reload()
        },666)
      })
      .catch(() => {
        ElMessage({
          type: catchType,
          message:catchMsg
        })
      })
}
onMounted(()=>{
  newBrowControl.value = inject('newBrowControl')
  initialize()
})
//卸载前
onUnmounted(()=>{
  console.log("unmounted")
})

</script>


<template>
  <el-dialog  style="width: 1335px; height:650px;padding: 40px; margin-top: 30px;"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :show-close="true">
<!--    借阅人-->
    <span class="form-header-one">新增登记</span>
    <span class="form-header">患者信息</span>
    <el-form  label-width="auto" label-position="left"  style=" margin-top: 20px; padding: 0 20px">
      <el-row :gutter="10" >
        <el-col :span="8">
          <el-form-item  size="small" required class="custom-form-item" label="病案号" >
<!--            <el-input style="color:#000000;" class="custom-input" placeholder="点击选择患者或手动输入" ></el-input>-->
            <el-select  filterable :clearable="true" size="small"  placeholder="点击选择患者或手动输入"  class="custom-input">
              <el-option  label="张三" value="张三" ></el-option>
              <el-option  label="里斯" value="里斯" ></el-option>
              <el-option  label="王五" value="王五"  ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item required class="custom-form-item" label="住院号" >
            <el-select  filterable :clearable="true"  placeholder="点击选择患者或手动输入" size="small" class="custom-input">
              <el-option  label="张三" value="张三" ></el-option>
              <el-option  label="里斯" value="里斯" ></el-option>
              <el-option  label="王五" value="王五"  ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item required  >
            <div style="padding: 0 20px;color: red"> *
              <span style="color: #AAAAAA; font-size: 13px" >选择后数据将自动代入输入框及表格</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" >
<!--:column="3"-->
        <el-descriptions   border >
          <!--          患者姓名-->
          <el-descriptions-item
              label="患者姓名"
              label-align="center"
              align="center"
              width="200px"
              class-name="my-content"
              label-class-name="my-label"
          >
            <span style="caret-color: #2c3e50">kooriookami</span>
          </el-descriptions-item>
          <!--          患者性别-->
          <el-descriptions-item
              label-class-name="my-label"
              label="性别"
              label-align="center"
              align="center"
              width="200px" >
            <span>kooriookami</span>
          </el-descriptions-item>
          <!--          年龄-->
          <el-descriptions-item
              label-class-name="my-label"
              label="年龄"
              abel-align="center"
              align="center"
              width="200px">
            <span>kooriookami</span>
          </el-descriptions-item>
          <!--          住院病区-->
          <el-descriptions-item
              label-class-name="my-label"
              label="住院病区"
              label-align="center"
              align="center"
              width="200px">
            <span style="caret-color: #2c3e50">kooriookami</span>
          </el-descriptions-item>
          <!--          入院时间-->
          <el-descriptions-item
              label-class-name="my-label"
              label="入院时间"
              label-align="center"
              align="center"
              width="200px">
            <span>kooriookami</span>
          </el-descriptions-item>
          <!--          出院时间-->
          <el-descriptions-item
              label-class-name="my-label"
              label="出院时间"
              label-align="center"
              align="center"
              width="200px">
            <span >kooriookami</span>
          </el-descriptions-item>
          <!--          出院诊断-->
          <el-descriptions-item
              label-class-name="my-label"
              label="出院诊断"
              label-align="center"
              align="left"
              width="200px">
            <span>kooriookami</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-row>
    </el-form>
    <span class="form-header" style="margin-top: 20px">借阅信息</span>
    <el-form  label-width="auto" label-position="left"  style=" margin-top: 20px; padding: 0 20px">
      <el-row :gutter="10" >
        <el-col :span="8">
          <el-form-item   class="custom-form-item" label="借阅人" required >
            <el-select v-model="browInfo.name" filterable :clearable="true"  placeholder="请选择借阅人"  class="custom-input" size="small">
              <el-option disabled label="请选择借阅人" value="请选择借阅人"></el-option>
              <el-option  label="张三" value="张三" ></el-option>
              <el-option  label="里斯" value="里斯" ></el-option>
              <el-option  label="王五" value="王五"  ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item required class="custom-form-item" label=借阅日期 >
            <el-date-picker
                type="date"
                clearable
                placeholder="年 /月/日"
                format="YYYY/MM/DD"
                v-model="browInfo.startDate"
                size="small"
                class="custom-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item required class="custom-form-item" label=归还时间 >
            <el-date-picker
                type="date"
                clearable
                placeholder="年 /月/日"
                format="YYYY/MM/DD"
                v-model="browInfo.endDate"
                size="small"
                class="custom-input"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" >
        <el-col :span="24">
          <el-form-item   class="custom-form-item" label="借阅原因" required >
            <el-input v-model="browInfo.enroll" size="small" style="color:#000000;" type="textarea" class="custom-input-one" placeholder="请选择借阅人" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div style="display: flex; justify-content: center;gap: 10px; margin: 30px">
        <el-button @click="closeSava()" style="background-color: #42b983" type="primary" >取消</el-button>
        <el-button type="primary" @click="saveInfo()">保存</el-button>
      </div>
    </template>


  </el-dialog>

</template>

<style scoped>
.el-message-box__content {
  text-align: center; /* 让内容居中 */
}

.el-message-box__title {
  text-align: center; /* 让标题居中 */
}
.form-header-one{
  display: flex;
  align-items: center;
  justify-content:center;
  height: 40px;
  font-weight: bold; /* 加粗字体 */
  margin:15px;
  padding: 0 10px;
  font-size: 20px;
}
.form-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  background-color: #f0f0f0; /* 背景颜色 */
  font-weight: bold; /* 加粗字体 */
  padding: 0 10px;
  margin:15px;
  font-size: 17px;
}
.custom-input   {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 230px;
  height: 32px;
  padding: 2px 10px 2px 10px;
  font-family: 'Microsoft YaHei UI', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #000000;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}
.custom-input-one   {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 32px;
  padding: 2px 10px 2px 10px;
  font-family: 'Microsoft YaHei UI', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #000000;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}
.custom-form-item  {
  --el-form-label-font-size: 13.5px;
}
/*啊实打实*/
:deep(.my-label) {
  background: #FAFAFA !important;
  color: #7A7A7A !important;
  font-weight: normal !important;
}



 :deep(.dialog-title-left) {
   text-align: left !important;
 }



</style>
